<template>
	<view>
		<view class="addlist" v-for="(item,key) in list" :key="key">
			<view class="addlisttop">
				<view class="addlisttop_text">
					<view class="addlisttop_left">
						姓名：{{item.name}}
					</view>
					<view class="addlisttop_right">
						联系电话：{{item.phone}}
					</view>
				</view>
				<view class="addlisttop_address">
					收货地址：{{item.pro_name}}{{item.city_name}} {{item.area_name}} {{item.add_ress}}
				</view>
			</view>
			<view class="addlistbottom">
				<view class="addlistbottom_left">
					默认
					<image src="https://www.kmdj2018.com/Uploads/zfb/addtrue.png" mode="aspectFill" v-if="item.status == 1" @click="getSeva(item,-1)"></image>
					<image src="https://www.kmdj2018.com/Uploads/zfb/addfalse.png" mode="aspectFill" v-else @click="getSeva(item,1)"></image>
				</view>
				<view class="addlistbottom_right">
					<image src="https://www.kmdj2018.com/Uploads/zfb/bianji.png" mode="aspectFill" @click="getXg(item.id)"></image>
					<image src="https://www.kmdj2018.com/Uploads/zfb/del.png" mode="aspectFill" @click="getdel(item.id)"></image>
				</view>
			</view>
		</view>
		<view class="setupButton">
			<view class="setupButton_t">
				<button @click="getnav('/pages/address/address')">新增</button>
			</view>
		</view>
		<pop ref="popOut" direction="center" :is_close="false" :is_mask="true" :width="660" height="fit-content" :maskFun="true">
			<iSpop text="确定要删除当前地址？" left="取消" right="确定" @clickleft="$refs.popOut.close()" @clickright="getcancel">
			</iSpop>
		</pop>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop.vue";
	export default {
		data() {
			return {
				list:[],
				id:''
			};
		},
		components:{
			pop
		},
		onShow() {
			this.init()
		},
		methods:{
			getdel(id){
				this.$refs.popOut.show()
				this.id = id
			},
			getXg(data){
				this.getnav('/pages/address/address',data)
			},
			getSeva(item,status){
				this.$request("User/SaveAddress", {
					data: {
						id:item.id,
						phone:item.phone,
						name:item.name,
						pro_id:item.pro_id,
						city_id:item.city_id,
						area_id:item.area_id,
						add_ress:item.add_ress,
						status:status,
					},
					isLoad: false
				}).then(res => {
					this.init()
				})
			},
			init(){
				this.$request("User/AddressList", {
					data: {
				
					},
					isLoad: false
				}).then(res => {
					this.$refs.popOut.close()
					this.list = res.result
				})
			},
			getcancel(){
				this.$request("User/DeleteAdd", {
					data: {
						id:this.id
					},
					isLoad: false
				}).then(res => {
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addlist{
		margin-bottom: 20rpx;
		padding: 0 32rpx;
		background-color: #fff;
	}
	.addlisttop{
		padding: 32rpx 0;
		border-bottom: 1px solid #E6E7EB;
		.addlisttop_text{
			.addlisttop_left{
				display: inline-block;
				font-size: 32rpx;
				width: 248rpx;
				color: #323233;
			}
			.addlisttop_right{
				display: inline-block;
				font-size: 32rpx;
				color: #323233;
			}
		}
		.addlisttop_address{
			font-size: 28rpx;
			color: #323233;
			margin-top: 24rpx;
		}
		
	}
	.addlistbottom{
		padding: 28rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.addlistbottom_left{
			font-size: 28rpx;
			display: flex;
			align-items: center;
			image{
				margin-left: 10rpx;
				width:60rpx ;
				height: 40rpx;
				margin-top:8rpx;
			}
		}
		.addlistbottom_right{
			image{
				width: 44rpx;
				height: 44rpx;
			}
			image:first-child{
				margin-right: 60rpx;
			}
		}
	}
	.setupButton {
		position: fixed;
		bottom: 36rpx;
		width: 100%;
		
		.setupButton_t{
			padding: 0 32rpx;
			button {
				margin: 0 auto;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #F7BC1C;
				font-size: 32rpx;
				color: #323233;
				border-radius: 60rpx;
				font-weight: 600;
			}
			button::after{
				border: none;
			}
		}
		
	}
</style>
